<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box"><span>我是span</span>我是div</div>
    <script>
        // 常用的dom操作  : 第一步 获取元素  。 第二步 操作元素
        // 一、innerHTML : 获取或者设置元素的超文本；
        // 1.获取元素的超文本
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     console.log(boxEle.innerHTML);
        // }

        // 2.设置元素里的超文本
        // 注意 ： 会覆盖元素里之前的内容  ，会解析超文本
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){  // 点击文档的时候会执行修改 boxEle的内容
        //     // boxEle.innerHTML = "修改了";
        //     boxEle.innerHTML = "<h1>我是标题</h1>";
        // }


        // 二 、innerText ： 获取或者设置元素的文本内容
        // 1.获取文本
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     console.log(boxEle.innerText); // 只会获取元素里的文字，包含子元素的文字 ；
        //     // 如果是文本内容 既可以使用 innerHTML 也可以使用 innerText
        //     // 如果是超文本 就只能使用innerHTML
        // }

        // 2.设置文本
        // 注意： 会覆盖之前的内容  不会解析超文本
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     // boxEle.innerText = "修改了";
        //     boxEle.innerText = "<h1>我是标题</h1>";
        // }


      /*
      // 对象数组
        var arr =    [{
                name:张三,
                age:20
            },{
                name:李四,
                age:20
            },
        {
             name:王五,
            age:20
        },{
             name:王小二,
            age:20
        }]
    // 根据上面的数据 ，生成 table 一个对象是一个tr 对象里的字段对应一个td
    
    |  姓名  |年龄 |
    |  张三  | 20  |
    |  李四  | 20  |
    |  王五  | 20  |
        
        
        
        */

    // var  arr = ["张三","李四","王五"];  // 生成li里显示出来




    </script>
</body>

</html>